<template lang="pug">
    div
        FiltersTable(
            :BreadcrumbList="BreadcrumbList"
            :filters="filters"
            :filterList="filterList"
            :TableDataList="TableList"
            :ColumnsList="TableColumns"
            :Pagination="Pagination"
            @listenHandleClickFilterSearch="HandleClickFilterSearch"
            @listenHandleChangePage="HandleChangePage"
            @listenHandleChangePageSize="HandleChangePageSize"
        )
</template>

<script>
    import FiltersTable from '@/components/filter-table/index'
    import {getCommentsList} from '@/service/comments'
    import {TableColumns, filterList, BreadcrumbList} from './list'

    export default {
        data() {
            return {
                Pagination: {
                    page: 1,
                    pageSize: 10,
                    total: 0
                },
                filterList,
                filters: filterList.reduce((obj, item) => {
                    if (item.type !== 'button') {
                        obj[item.key] = ''
                    }
                    return obj
                }, {}),
                TableList: [],
                TableColumns,
                BreadcrumbList
            }
        },
        components: {
            FiltersTable
        },
        created() {
            this.loadData()
        },
        methods: {
            loadData() {
                this.getParamTableDataList()
            },
            async getParamTableDataList() {
                const params = Object.assign({}, {
                    page: this.Pagination.page,
                    pageSize: this.Pagination.pageSize
                }, this.filters)
                const {data: res} = await getCommentsList(params)
                this.TableList = res.data
                this.Pagination.total  = res.meta.count
            },
            HandleClickFilterSearch(buttonKey) {
                if (buttonKey === 'search') {
                    this.getParamTableDataList()
                }
            },
            HandleChangePage(e) {
                this.Pagination.page = e
                this.getParamTableDataList()
            },
            HandleChangePageSize(e) {
                this.Pagination.pageSize = e
                this.getParamTableDataList()
            },
        }
    }
</script>

<style lang="scss" scoped>
    .main {
        font-size: 30px;

        .seach {
            color: #999;
            font-size: 12px;
            padding: 0 5px;
        }

        .card {
            margin: 20px 0;
        }

        .pageorg {
            padding: 30px 0 10px;
        }
    }

</style>